<style lang="scss" src="./scss/footer.scss"></style>

<template>
  <section class="mod-footer">
    <label class="label"
      ><input type="checkbox" v-model="isCheckAll" />
      <div class="status">
        已完成 <span class="completed">{{ count }}</span> / 全部
        <span class="total">{{ todos.length }}</span>
      </div>
    </label>

    <el-button size="small" type="danger" @click="clearAllCompletedTodos">清除已完成任务</el-button>
  </section>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { Todo } from "../types/todo";
export default defineComponent({
  props: {
    todos: {
      type: Array as () => Todo[],
      required: true,
    },
    checkAll:{
      type:Function,
      required:true
    },
    clearAllCompletedTodos:{
      type:Function,
      required:true
    }
  },
  setup(props) {
    // 已完成的计算属性操作
    const count = computed(() => {
      return props.todos.reduce(
        (pre, todo) => pre + (todo.isCompleted ? 1 : 0),
        0
      );
    });
    // 全选或不全选的计算属性操作
    const isCheckAll = computed({
      get() {
        // 已完成个数大于0 并且等于todos数组全部的个数
        return count.value > 0 && props.todos.length === count.value;
      },
      set(val) {
        props.checkAll(val)
      },
    });
    return {
      count,
      isCheckAll,
    };
  },
});
</script>